<template>
  <div id="app">
    <ChatCom class="chat" :userInfo='userInfo'></ChatCom>
    <UserListCom class="userlist" :userlist="userlist"  @toggleName="toggleName"></UserListCom>
  </div>
</template>

<script>
import ChatCom from "./components/chatCom";
import UserListCom from "./components/userListCom";
import "./assets/global.css";

export default {
  name: "App",
  components: {
    ChatCom,
    UserListCom
  },
  data() {
    return {
      userlist: [
        { username: "小灰", img: require("./assets/1.jpg") },
        { username: "小美", img: require("./assets/2.jpg") },
        { username: "小丽", img: require("./assets/3.jpg") },
        { username: "小天", img: require("./assets/4.jpg") },
        { username: "小灰", img: require("./assets/1.jpg") },
        { username: "小美", img: require("./assets/2.jpg") },
        { username: "小丽", img: require("./assets/3.jpg") },
        { username: "小天", img: require("./assets/4.jpg") },
        { username: "小灰", img: require("./assets/1.jpg") },
        { username: "小美", img: require("./assets/2.jpg") },
        { username: "小丽", img: require("./assets/3.jpg") },
        { username: "小灰", img: require("./assets/1.jpg") },
        { username: "小美", img: require("./assets/2.jpg") },
        { username: "小丽", img: require("./assets/3.jpg") }
      ],
      userInfo:{username: "聊天列表", img: require("./assets/1.jpg")}
    };
  },
  methods: {
    toggleName(index) {
      console.log(index);
      this.userInfo=this.userlist[index]
    }
  }
};
</script>

<style>
/* 在实际开发过程中应当避免给元素定死位置和宽高 */
#app {
  width: 700px;
  height: 70vh;
  box-shadow: 0 0 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  overflow: hidden;
}
.chat {
  flex: 3;
  background: #eef7f2;
  background-image: url('./assets/5.jpeg');
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: center;
  background-size: cover;
}
.userlist {
  flex: 1;
  /* position: relative;
  background: #f1f0ed; */

}
</style>
